<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-21 17:24:32
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-29 10:19:42
 * @FilePath: \zxi-surface-manual\src\components\BaseFrame\BaseFrame.vue
 * @Description: 
 -->

<script setup lang="ts">
import { computed, provide, ref } from "vue";
import TopFrame from "./topFrame.vue";
import BaseVideo from "~/BaseVideo/BaseVideo.vue";
import BaseMenu from "~/BaseMenu/BaseMenu.vue";
import { toggleDark, isDark } from "src/composables";
import { PmFrameKey, iVideoItem } from "./";
// import {  } from "module";

const themeIcon = computed(() => {
  return isDark.value ? "icon-icon-taikong2" : "icon-taiyang1";
});

const video = ref<iVideoItem>({
  functionKey: "",
  imgUrl: "",
  name: "",
  title: "",
  videoUrl: "",
});

function videoReset() {
  video.value = {
    functionKey: "",
    imgUrl: "",
    name: "",
    title: "",
    videoUrl: "",
  };
}

const showDrawer = ref(true);

// const isPlay = ref(false);

provide(PmFrameKey, {
  video,
  videoReset,
  showDrawer,
});
</script>

<template>
  <div class="pm-frame">
    <header class="pm-frame-header">
      <TopFrame></TopFrame>
    </header>
    <aside class="pm-frame-aside">
      <PmButton
        style="order: 999; font-size: 3rem"
        :iconfont="themeIcon"
        @click="toggleDark()"
      />
      <!-- <PmButton
        style="order: 999; font-size: 3rem"
        :iconfont="'icon-qidong'"
        @click="isPlay = !isPlay"
      /> -->
    </aside>
    <main class="pm-frame-main">
      <!-- <PmDrawer v-model="showDrawer">
        <BaseMenu></BaseMenu>
      </PmDrawer> -->

      <BaseMenu></BaseMenu>
      <!-- <Teleport to="body">
        <div class="video-wrapper">
        <BaseVideo
          :video-url="video.videoUrl"
        ></BaseVideo>
        
      </div>
      </Teleport> -->
      <div class="video-wrapper">
        <BaseVideo :video-url="video.videoUrl"></BaseVideo>
      </div>
    </main>
  </div>
</template>

<style lang="less" scoped>
.pm-frame {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: 6rem 1fr;
  gap: 0.2rem;
  background-color: var(--pm-border-color);
  > * {
    background-color: var(--pm-background-color);
    pointer-events: all;
    cursor: default;
  }
  .pm-frame-header {
    grid-column: 1/3;
    display: flex;
  }
  .pm-frame-aside {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    gap: 0.5rem;
  }
  .pm-frame-main {
    overflow: hidden;
    position: relative;
    display: flex;
    .video-wrapper {
      width: 0;
      height: 0;
      overflow: hidden;
      // flex: auto;
      position: relative;
      // height: 100%;
      // width: 100%;
      .video-empty {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
